<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图文混排7</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .imgText_mix_7 {
         background-color: var(--c_b_dark);
      }

      .imgText_mix_7_main li {
         display: flex;
         flex-direction: column;
         justify-content: center;
      }

      .imgText_mix_7_main li:nth-child(2) h2 {
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .imgText_mix_7_main li:nth-child(2) p {
         padding-bottom: 22px;
         color: var(--c_subtitle);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_7_main li:nth-child(2) span {
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_7_main li:nth-child(3) h2 {
         padding-bottom: 22px;
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .imgText_mix_7_main li:nth-child(3) p {
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_7_main li:nth-child(4) h2 {
         padding-bottom: 22px;
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .imgText_mix_7_main li:nth-child(4) p {
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_7_main_img {
         width: 100%;
         height: 300px;
      }

      .imgText_mix_7_main_img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      @media (max-width:768px) {
         .imgText_mix_7_main li {
            padding: 0 0 20px 0;
         }
      }
   </style>
</head>

<body>
   <div class="imgText_mix_7 modular">
      <div class="public_width">
         <div class="imgText_mix_7_contetn">
            <ul class="imgText_mix_7_main row">
               <li class="col-xl-3 col-12">
                  <div class="imgText_mix_7_main_img">
                     <img src="../images/img_collection_5_2.png" alt="">
                  </div>
               </li>

               <li class="col-xl-3 col-12">
                  <h2>公司优势</h2>
                  <p>PREPONDERANCE</p>
                  <span>XX雕塑公司为您提供安全放心的上乘产品</span>
               </li>

               <li class="col-xl-3 col-12">
                  <h2>艺术景观创造者</h2>
                  <p>XX雕塑公司 - 文化艺术景观的创造者，专注于城市、企业、商业、人物、不锈钢、园林、肖像等创意主题雕塑设计。</p>
               </li>

               <li class="col-xl-3 col-12">
                  <h2>多元化的客户基础</h2>
                  <p>与客户建立并保持长期合作，并致力为其提供产品和服务。通过与客户的深入接触，以及对客户业务的深刻理解，赢得了客户的忠诚度。</p>
               </li>
            </ul>
         </div>
      </div>
   </div>
</body>

</html>